<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

<div id="box">
    <input type="text" v-model="value">
    <button @click="add">添加</button>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>内容</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- ⭐ 不使用自定义属性换色，使用class属性实现奇数行换色 -->
            <tr v-for="(item, index) in arr" :key="item.id" :class="index%2!=0 ? 'even' :''" v-odd="index" @mouseover="Move($event)">
                <td>{{item.id}}</td>
                <td>{{item.text}}</td>
                <td>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    // ⭐ 使⽤⾃定义指令，实现偶数行换⾊
    Vue.directive('odd', (el, binging) => {
        if (binging.value % 2 == 0) {
            el.style.backgroundColor = '#DC143C';
        }
    })
    new Vue({
        el: '#box',
        data: {
            value: '',
            even: 'background:#4000FF',
            arr: [{
                id: 1,
                text: '二仙桥走成华大道'
            }, {
                id: 2,
                text: 'a1高闪来一个'
            }, {
                id: 3,
                text: '得得得得得得'
            }, ]
        },
        methods: {
            add() {
                this.arr.push({
                    id: this.arr[this.arr.length - 1].id + 1,
                    text: this.value
                })
                this.value = ''
            },
            del(id) {
                console.log(id);
                this.arr = this.arr.filter(item => item.id !== id)
            },
            Move(event) {
                event.target.style.backgroundColor = 'white';
            }
        }
    })
</script>

<style>
    li {
        list-style: none;
    }
    
    .even {
        background: #4000FF;
    }
</style>